
import { DetailDataType, fetchArticleDetailAPI } from "@/apis/details"
import { NavBar } from "antd-mobile";
import { useEffect, useState } from "react"
import { useNavigate, useSearchParams } from "react-router-dom";
const Detail = () => {
    const [detail, setDetail] = useState<DetailDataType | null>(null);

    const [params] = useSearchParams();
    const id = params.get("id");

    useEffect(() => {
        const getDetail = async () => {
            try {
                const res = await fetchArticleDetailAPI(id);
                setDetail(res.data.data);
            } catch (error) {
                throw new Error("获取详情失败");
            }
        };
        if(id){
            getDetail();
        }
    }, [id])


    const navigate = useNavigate();
    const goBack = () => {
        navigate(-1);
    }

    // 数据返回之前， loading渲染占位
    if (!detail) {
        return <div>加载中...</div>;
    }

    // 数据返回之后，正式渲染的内容
    return (
        <div>
            <NavBar onBack={goBack}>{detail?.title}</NavBar>
            <div dangerouslySetInnerHTML={{__html: detail?.content}}></div>
        </div>
    )
}

export default Detail